<template>
<div id="container">
    <div id="title">
        <h1>手机商城</h1>
    </div>
    <div class="input">
        <el-input v-model="name" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
    </div>
    <div class="input">
        <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
    </div>
    <el-row :gutter="20" justify="center">
                <el-col :span="3" class="grid-content ep-bg-purple" align="middle">
                    <el-button @click="login" style="width: 80%;" type="primary" :disabled="disabled">登录</el-button>
                </el-col>
                <el-col :span="3" class="grid-content ep-bg-purple" align="middle">
                    <el-button @click="register" style="width: 80%;" type="primary">去注册</el-button>
                </el-col></el-row>
</div>
</template>
<script>
import Storage from '../tools/Storage'
import { ElMessage } from 'element-plus';

export default {
   name:"Login",
   data(){
    return{
        name:"",
        password:""
    } },
    computed: {
        disabled(){
            return this.name.length==0||this.password.length===0;
        }
    },
    methods: {
        login(){
            let that = this
            Storage.commit("registUserInfo",{
                name:this.name,
                password:this.password
            }
            )
            ElMessage({
                message:"登陆成功",
                type:'success',
                duration:3000
            })
                that.$router.push({name:"home"})
        },
        register(){
            let that = this
            that.$router.push({name:"register"})
        }
    }
  
}
</script>
<style scoped>

/**/ 
#container{
    /* background-image: url("");s */
    background-color: gainsboro;
    height: 100%;
    width: 100%;
    position: absolute;
}
#title{
    text-align:center;
    color: rgb(89, 182, 236);
    margin-top: 200px;
}
.input{
 margin: 20px auto;
 width: 500px;
} 
</style>